<template>
    <div>
        <!-- <h3>State</h3>
        <p>a:{{ mdB.a }}</p>
        <p>b:{{ mdB.b }}</p>
        <hr>
        <h3>getters</h3>
        <p>doubleA:{{ mdB.doubleA }}</p>
        <p>doubleB:{{ mdB.doubleB }}</p>
        <p>both:{{ mdB.both }}</p>
        <p>doubleBoth:{{ mdB.doubleBoth }}</p>
        <h3>方法_同步</h3>
        <p><button @click="mdB.addA(10)">a++</button><button @click="mdB.a++">a++</button></p>
        <p><button @click="mdB.addB">b++</button><button @click="mdB.b++">b++</button></p>

        <h3>方法_异步</h3>
        <p><button @click="mdB.addA_Async(10)">a++</button></p>
        <p><button @click="mdB.addB_Async">b++</button></p>
        <p><button @click="mdB.addBoth_Async">both++</button></p> -->

        <h3>State</h3>
        <p>a:{{ a }}</p>
        <p>b:{{ b }}</p>
        <hr>
        <h3>getters</h3>
        <p>doubleA:{{ doubleA }}</p>
        <p>doubleB:{{ doubleB }}</p>
        <p>both:{{ both }}</p>
        <p>doubleBoth:{{ doubleBoth }}</p>
        <h3>方法_同步</h3>
        <p><button @click="addA(10)">a++</button><button @click="a++">a++</button></p>
        <p><button @click="addB">b++</button><button @click="b++">b++</button></p>

        <h3>方法_异步</h3>
        <p><button @click="addA_Async(10)">a++</button></p>
        <p><button @click="addB_Async">b++</button></p>
        <p><button @click="addBoth_Async">both++</button></p>
    </div>
</template>

<script setup>
    import {ref,reactive, toRefs} from "vue";
    import { storeToRefs } from 'pinia'
    import {useMdbStore} from "@/stores/mdB.js";

    var mdB = useMdbStore();
    console.log(mdB);

    // 如果将ref对象作为键值存储到代理对象, 代理对象对应键名取值是 => 会默认对ref对象解包
    // let x = ref(10);
    // let y = ref(20);

    // let data = reactive({x:x,y:y}); // {x:ref(10),y:ref(20)}

    // 直接操作代理对象对应键名取值和赋值不会丧失响应性
    // console.log(data.x);  // 代理对象默认对ref(10) 进行解包  =>  10 
    // data.x = 100; // ref.value = 100
    // console.log(x.value); 

    // 如果把解包后的值赋值给变量  => 该变量是一个新值和代理对象没有关联 => 丧失响应性
    // var a = data.x; //a =  10   丧失响应性




    // 问题:
    // mdB是一个代理对象 =>如果将ref对象作为键值存储到代理对象, 代理对象对于键名取值是 => 会默认对ref对象解包

    // mdB(代理对象)上属性默认是ref对象 => 在解构过程中,默认返回的值ref对象解包后的值
    // let {a,b} = mdB;  // 解构之后 mdB上的属性丧失响应性
    // console.log(a); // a = 10;
    // console.log(b); // b = 20;

    // toRefs(mdB) 返回新对象  基于响应式对象上的每一个属性,创建一个对应的 ref => 只针对reative对象的根属性
    // let {a,b} = toRefs(mdB);  
    let {a,b,doubleA,doubleB,both,doubleBoth} = storeToRefs(mdB);  
    console.log(a); // a = 10;
    console.log(b); // b = 20;
    let {addA,addB,addA_Async,addB_Async,addBoth_Async} =mdB;

   
</script>

<style lang="scss" scoped>

</style>